<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        #index{
            width: 600px;
            height: 300px;
            background-color: #c6e8e0;
            margin: auto;
            margin-top: 50px;
            padding-top: 20px;
        }
        .dl1{
            clear: both;
        }
        .dl1 dt{
            width: 150px;
            float: left;
            height: 30px;
            line-height: 30px;
            text-align: right;
        }
        .dl dd{
            padding-top: 10px;
            float: left;
        }
        h2{
            text-align: center;
        }
        #div1{
            padding-top:10px;
            width: 110px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="index">
        <h2>用户注册</h2>
        <form name="regform" action="#" method="post">
            <dl class="dl1">
                <dt>用户名:</dt>
                <dd><input type="text" name="name" onblur="checkname()" placeholder="请输入用户名"></dd>
                <dd id="errorname"></dd>
            </dl>
            <dl class="dl1">
                <dt>密码:</dt>
                <dd><input type="password" name="password" onblur="checkpwd()" placeholder="请输入密码"></dd>
                <dd id="errorpwd"></dd>
            </dl>
            <dl class="dl1">
                <dt>确认密码:</dt>
                <dd><input type="password" name="password2" onblur="checkpwd2()" placeholder="请再次输入密码"></dd>
                <dd id="errorpwd2"></dd>
            </dl>
            <div id="div1">
                <input type="submit" value="注册">
                <input type="reset" value="重置">
            </div>
        </form>
    </div>
</body>
</html>
<script>
   function checkname() {
        //用户名必须4-16位字母,数字,汉字,下划线 /^([a-zA-Z0-9_\u4e00-\u9fa5]{4,16})$/
       var regstr = /^([a-zA-Z0-9_\u4e00-\u9fa5]{4,16})$/;
       //获取输入的用户名
       var namestr = document.regform.name.value;
       //正则匹配
       if (!regstr.test(namestr)){
           x = document.getElementById("errorname").innerHTML = "用户名必须4-16位字母,数字,汉字,下划线";
           return false;
       }
       x = document.getElementById("errorname").innerHTML = "用户名可以使用";
           return true;
   }

   function checkpwd() {
        var regstr = /^[a-zA-Z]\w{5,17}$/;
        var pwsstr = document.regform.password.value;
        if (!regstr.test(pwsstr)){
            document.getElementById("errorpwd").innerHTML = "密码必须以字母开头，长度在6~18之间，只能包含字符、数字和下划线";
            return false;
        }document.getElementById("errorpwd").innerHTML = "密码符合规则";
            return true;
   }

   function checkpwd2() {
        var pwsstr = document.regform.password.value;
        var pwsstr2 = document.regform.password2.value;
        if (pwsstr==pwsstr2){
            document.getElementById("errorpwd2").innerHTML="两次输入一样";
            return true;
        }document.getElementById("errorpwd2").innerHTML="两次输入不一样,请重新输入";
        return false;
   }
</script>